<template>
  <div>
    <!-- 导航栏 -->
    <div class="lx_nav">
      <div class="lx_nav_left">
        <van-icon name="arrow-left" size="23" onclick="history.back()" />
      </div>
      <div class="lx_nav_right">收货地址</div>
    </div>
    <!--  -->
    <div class="dd1" v-for="item in list" :key="item">
      <div class="d1">
        <span>{{item.name}}</span>
        <span>{{item.sj}}</span>
      </div>
      <div class="d2">
        <p class="p1">
          <span>{{item.name[0]}}</span>
        </p>
        <span class="s1">{{item.dzs}}</span>
        <img
          src="https://ts1.cn.mm.bing.net/th/id/R-C.1ca94d2cb30c58e4315cb496f10d168d?rik=%2b1Sa9CNGjXrWVA&riu=http%3a%2f%2fwww.xitongzhijia.net%2fuploads%2fallimg%2f190813%2f100-1ZQ3135412-water.jpg&ehk=Zbiy1XGTRRfA%2bhiJdF8x%2bz8JYDX2i0KKRMxpQvqWzfo%3d&risl=&pid=ImgRaw&r=0"
          alt=""
        />
        
      </div>
      <div class="d3">

      </div>
    </div>
    <div class="dd2">
      <button @click="tz">+新增地址</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref,onBeforeMount } from "vue";
import { useRouter } from "vue-router";
import axios from 'axios'
const router = useRouter();

const list = ref([])

onBeforeMount(()=>{
  getlist()
})
const getlist=async()=>{
  const data = await axios.get('http://localhost:3000/yzp/daddress')
  list.value = data.data.data
  // console.log(data.data.data);
  
}
const tz=()=>{
  router.push('/address')
}
</script>

<style scoped>
.lx_login {
  width: 100vw;
  height: 100vh;
}

.lx_nav {
  width: 100%;
  height: 50px;
  display: flex;
  border-bottom: 1px solid #ccc;
}

.lx_nav_left {
  width: 50px;
  height: 30px;
  margin-left: 30px;
  margin-top: 14px;
}

.lx_nav_right {
  width: 310px;
  height: 50px;
  font-size: 18px;
  margin-left: 100px;
  line-height: 50px;
}

.d1 {
  /* margin: 10px; */
  margin-top: 30px;
  margin-left: 40px;
}
.d1 span {
  margin: 15px;
}
.d2 {
  display: flex;
  width: 330px;
  margin-left: 10px;
  /* background: red; */
}
.d3{
  margin-top: 20px;
  border: 0;
  border-top: 1px solid #d0d0d5;
}
.p1 {
  width: 40px;
  height: 40px;
  background: rgb(165, 237, 191);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
.p1 span {
  color: green;
}
.s1 {
  font-size: 12px;
  margin-top: 10px;
  margin-left: 18px;
  color: rgb(139, 138, 138);
}
.d2 img {
  width: 40px;
  height: 30px;
  /* margin-left: 40px; */
}
.dd2{
  position: fixed;
  bottom: 10px;
}
button{
  width: 300px;
  height: 40px;
  color: aliceblue;
  background: rgb(53, 221, 142);
  border-radius: 35px;
  border: 0;
  margin-left: 50px;
}
</style>